<!-- 我的/个人信息页面，  tabbar第四栏 -->
<!-- 1. 登录/退出 2. 查看个人信息 -->
<template>
  <view class="container">
    <view class="userInfo">
      <img :src="userInfo.token ? userInfo.headImgPath : 'http://1.116.226.250/source/image/null.png'" alt="">
      <u-row class="username" @click="updateUserConfigMsg()" justify="space-between" gutter="4">
        <u-col span="10" offset="3">
          <view style="color: #fff; font-size: 18px;">
            {{ userInfo.token ? userInfo.nickname : "微信用户" }}
          </view>
        </u-col>
        <u-col span="2"  offset="1">
          <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
        </u-col>
      </u-row>
    </view>

    <!-- 功能列表 -->
    <view class="list-box">
      <view v-for="(item, index) in lineArray" :key="index" class="list-box-item" @click="toOtherPage(item)">
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="4" offset="1">
            <img :src="item.iconPath"><text style="margin-left: 5px;">{{item.text}}</text>
          </u-col>
          <u-col span="4" offset="6">
            <u-icon name="arrow-right" color="#000" size="18"></u-icon>
          </u-col>
        </u-row>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        lineArray: [{
          iconPath: 'http://1.116.226.250/source/list_icon/order.png',
          text: "我的订单",
          tag: "order",
        }, {
          iconPath: 'http://1.116.226.250/source/list_icon/money.png',
          text: "价格列表",
          tag: "priceList",
        }, {
          iconPath: 'http://1.116.226.250/source/list_icon/address.png',
          text: "收货地址",
          tag: "address",
        }, {
          iconPath: 'http://1.116.226.250/source/list_icon/question.png',
          text: "常见问题",
          tag: "normalQuestion",
        }, {
          iconPath: 'http://1.116.226.250/source/list_icon/cooperation.png',
          text: "商务合作",
          tag: "businessCooperation",
        }, {
          iconPath: 'http://1.116.226.250/source/list_icon/call.png',
          text: "联系客服",
          tag: "call",
        }],
      };
    },
    computed: {
      ...mapState('user', ['userInfo'])
    },
    methods: {
      // 列表跳转至其他页面
      toOtherPage(e) {
        if (e.tag === "order") {
          uni.switchTab({
            url: `/pages/${e.tag}/${e.tag}`
          })
        } else {
          uni.navigateTo({
            url: `/components/${e.tag}/${e.tag}`
          })
        }
      },
      // 修改用户设置
      updateUserConfigMsg() {
        uni.navigateTo({
          url: '/components/myInfo/myInfo'
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }
  .container {
    width: 100%;
    height: 100%;

    .userInfo {
      width: 100%;
      height: 320rpx;
      background-color: #05C160;
      display: flex;
      align-items: center;

      img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 140rpx;
        background-color: #fff;
        margin-left: 40rpx;
        margin-top: 30rpx;
      }

      .username {
        font-size: 50rpx;
        margin-left: 50rpx;
        color: #FFF;
      }
    }

    .list-box {
      text-align: center;
      font-size: 17px;
      margin-top: 20px;

      .list-box-item {
        line-height: 40rpx;
        height: 40px;
        width: 100%;
        margin-top: 26rpx;

        img {
          width: 40rpx;
          height: 40rpx;
          vertical-align: bottom;
        }
      }
    }
  }
</style>
